<template>
  <div
    class="chart-title-component"
    v-show="
      titleConfig && (titleConfig.titleVisible || titleConfig.unitVisible)
    "
  >
    <span class="chart-title" :style="titleStyle">{{ titleContent }}</span>
    <span class="chart-unit" :style="unitStyle">{{ unitContent }}</span>
  </div>
</template>

<script>
export default {
  name: 'ChartTitle',
  props: {
    titleConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data(){
    return{

    }
  },
  computed: { 
    titleContent(){
      this.titleConfig.titleContent || '请输入标题'
    },
    unitContent(){
      this.titleConfig.unitContent || '单位'
    },
    titleStyle(){
      return {
        display: this.titleConfig.titleVisible ? 'inline' : 'none',
        fontWeight: this.titleConfig.titleBold ? 'bold' : 'normal',
        fontSize: this.titleConfig.titleSize
          ? `${this.titleConfig.titleSize}px`
          : '12px',
        fontStyle: this.titleConfig.titleItalic ? 'italic' : 'normal',
        color: this.titleConfig.titleColor || '#333333',
      };
    },
    unitStyle(){
       return {
        display: this.titleConfig.unitVisible ? 'inline' : 'none',
        fontWeight: this.titleConfig.unitBold ? 'bold' : 'normal',
        fontSize: this.titleConfig.unitSize
          ? `${this.titleConfig.unitSize}px`
          : '12px',
        fontStyle: this.titleConfig.unitItalic ? 'italic' : 'normal',
        color: this.titleConfig.unitColor || '#333333',
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-title-component {
  display: flex;
  width: 100%;
  height: max-content;
  min-height: 40px;
  max-height: 60px;
  justify-content: space-between;
  align-items: baseline;
  box-sizing: border-box;
  padding: 8px;
  .chart-title,
  .chart-unit {
    overflow: hidden;
    white-space: nowrap;
    word-break: break-word;
    text-overflow: clip;
  }
  .chart-title {
    width: 75%;
  }
  .chart-unit {
    width: 25%;
    text-align: right;
  }
}
</style>
